<template>
  <div class="recharge-record">
    <Card>
      <p slot="title">对账文件</p>
      <i-form ref="form-validate" :model="form" :label-width="80">
        <Row type="flex" justify="end" class="code-row-bg">
            <FormItem class="item-padding">
              <DatePicker size="large" type="date"  v-model="form.check_date" placeholder="对账日期" style="width: 200px"></DatePicker>

            </FormItem>
          <Form-item>
            <Button @click="search" class="com-btm">
              搜索</Button>
          </Form-item>
        </Row>
      </i-form>

      <i-table :columns="allColumns" :data="newData"></i-table>
      <template v-if="newData.length>1">
        <div style="margin-top: 10px;">
          <Page size="small" :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="pagesize"
            show-total show-sizer show-elevator></Page>
        </div>
      </template>
    </Card>
  </div>

</template>
<script>
import { merpaidcheck } from '@/api/paid'
export default {

  data () {
    return {

      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页

      form: {
        check_date: ''
      },

      allColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '对账日期',
          key: 'check_date'
        },
        {
          title: '商户ID',
          key: 'uid'
        },
        {
          title: '商户名称',
          key: 'nickname'
        },
        {
          title: '创建时间',
          key: 'add_time'
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          // render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
          // }
          render: (h, params) => {
            return h('div', [
              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.paidcheck(params.row)
                    }
                  }
                },
                '下载账单'
              )
            ])
          }
        }
      ],
      newData: []
    }
  },

  methods: {
    // 是否默认的状态
    getList () {
      const query = {
        uid: this.$store.state.user.userInfo.uid,
        keyword: '',
        check_date: this.form.check_date,
        pageSize: this.pageSize,
        pageCurrent: this.pageCurrent
      }
      merpaidcheck(query)
        .then(res => {
          this.newData = res.data.data
          this.dataCount = res.data.count
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    paidcheck (row) {
      let downUrl = 'http://api.zsajc.com/api/downloadpaidcheck?uid=' + row.uid + '&check_date=' + row.check_date

      window.open(downUrl, '_blank') // 新窗口打开外链接
    },
    search () {
      this.getList()
    },

    // 点击切换页面
    changepage (index) {
      this.page = index
      this.getList()
    },
    // 每页显示的数据条数
    pagesize (index) {
      this.pageSize = index
      this.getList()
    }
  },
  created () {
    this.getList()
  }
}
</script>
<style lang="less">

</style>
